function HubtSel(cla,id,holder) {

    var option = $(id).children("option");

    var clas = id.substring(1);
    var sel = new Array();
    for (var i=0;i<option.length;i++){
        sel.push(option[i].label);
    }
    var claDiv = $(cla);
//        console.log(claDiv.children(id));
    $(id).parent(claDiv).append("<div class='"+clas+"-box hubt-select-box'>" +
        "<input type='text' class='"+clas+"-input hubt-select-input' placeholder="+holder+" disabled>" +
        "<div class='"+clas+"-btn hubt-select-btn'></div>" +
        "<ul class='"+clas+"-ul hubt-select-ul'>" +
        "</ul>" +
        "</div>");
    for (var key in  sel ){
        $("."+clas+"-ul").append("<li data-id="+key+">"+sel[key]+"</li>");
    }
    $("."+clas+"-btn").on('click',function () {
        if( $("."+clas+"-ul").hasClass("active")){
            $("."+clas+"-ul").removeClass("active");
        }else {
            $("."+clas+"-ul").addClass("active");
        }
    });
    $("."+clas+"-ul").children("li").on("click",function () {
        $("."+clas+"-input").val($(this).html());
        $("."+clas+"-ul").removeClass("active");
        $("."+clas+"-ul").children("li").removeClass("active");
       $(this).addClass("active");




    });
}

function HubSel(cla,id,holder) {
    /*获取select下option的值*/
    var option = $(id).children("option");
    /*获取生成class变量,即去除ID的符号 */
    var clas = id.substring(1);
    /*生成数组，用于存放option值*/
    var optionArr = new Array();
    /*把所有option的值便利到数组optionArr中*/
    for(var i=0; i<option.length;i++){
        optionArr.push(option[i].label);
    }
    /*获取公共闭包的class*/
    var claDiv = $(cla);
    var html ="";
    html +="<div class='"+clas+"-box hubt-select-box'>";
    html +="<input type='text' name='' class='"+clas+"-input hubt-select-input' placeholder='"+holder+"' disabled />";
    html +="<div class='"+clas+"-btn hubt-select-btn'></div>";
    html +="<ul class='"+clas+"-ul hubt-select-ul'>";
    html +="<input type='text' class='"+clas+"-ul-input hubt-select-ul-input' >";
    for( var key in optionArr){
        html+="<li class='"+clas+"-li' data-id="+key+">"+optionArr[key]+"</li>";
    }
    html +="</ul>";
    html +="</div>";
    $(id).parent(claDiv).append(html);
    $("."+clas+"-btn").on('click',function () {
        if( $("."+clas+"-ul").hasClass("active")){
            $("."+clas+"-ul").removeClass("active");
        }else {
            $("."+clas+"-ul").addClass("active");
        }
    });
    $("."+clas+"-ul").children("li").on("click",function () {
        $("."+clas+"-input").val($(this).html());
        $("."+clas+"-ul").removeClass("active");
        $("."+clas+"-ul").children("li").removeClass("active");
        $(this).addClass("active");
        $("."+clas+"-ul-input").val("");
        $("."+clas+"-ul").children("li").show();
    });

    $("."+clas+"-ul-input").bind("input propertychange",function (event) {
        var search_input = $("."+clas+"-ul-input").val();
        for(var j=0; j<$("."+clas+"-li").length;j++){
            $("."+clas+"-li:contains(" + search_input.trim() + ")").show();
            $("."+clas+"-li:not(:contains(" + search_input.trim() + "))").hide();
        }

    });

}

